<template>
  <div class="p-20px">
    <Header v-if="activityInfo" :activityInfo="activityInfo" @refresh="handleRefresh"></Header>
    <div v-if="dataItems" class="flex gap-20px mt-20px">
      <div class="min-w-610px w-full" :class="{ 'w-1/2': activityInfo?.maxPrice }">
        <DataOverview title="报名数据总览" :datas="dataItems[0]"></DataOverview>
      </div>
      <div class="w-1/2 min-w-610px" v-if="activityInfo?.maxPrice">
        <DataOverview title="报名费用总览" :datas="dataItems[1]"></DataOverview>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import Header from './components/Header.vue';
  import { getActivityCountInfo, getActivityInfo } from '@/api/institution/activityList';
  import { IDataItem, ListItem } from '@/api/institution/model/activityListModel';
  import { onMounted, ref } from 'vue';
  import DataOverview from './components/DataOverview.vue';
  import { accMul } from '@/utils/number';
  import { useMessage } from '@/hooks/web/useMessage';
  const route = useRoute();
  const { createMessage } = useMessage();
  const activityInfo = ref<ListItem>();
  const dataItems = ref<IDataItem[][]>([]);

  onMounted(() => {
    queryActivityInfo();
    queryActivityCountInfo();
  });
  const handleRefresh = () => {
    queryActivityCountInfo();
    queryActivityInfo();
    createMessage.success('刷新成功');
  };
  const queryActivityInfo = async () => {
    activityInfo.value = await getActivityInfo(route.params.id as unknown as number);
  };
  const queryActivityCountInfo = async () => {
    const res = await getActivityCountInfo(route.params.id as unknown as number);
    dataItems.value?.push([
      {
        title: '报名人数 ( 总 )',
        number: res.registerNum,
        dayNumber: res.todayRegisterNum,
      },
      {
        title: '报名成功 ( 总 )',
        number: res.passedNum,
        dayNumber: res.todayPassedNum,
      },
      {
        title: '已签到 ( 总 )',
        number: res.signNum,
        dayNumber: res.todaySignNum,
      },
      {
        title: '待审核 ( 总 )',
        number: res.waitingReviewNum,
        dayNumber: res.todayWaitingReviewNum,
      },
      {
        title: '浏览次数 ( 总 )',
        number: res.browseNum,
        dayNumber: res.todayBrowsePeopleNum,
      },
      {
        title: '浏览人数 ( 总 )',
        number: res.browsePeopleNum,
        dayNumber: res.todayBrowsePeopleNum,
      },
    ]);
    dataItems.value?.push([
      {
        title: '报名数 ( 总 )',
        number: res.totalTicketNum,
        dayNumber: res.todayTotalTicketNum,
        openPopover: true,
        popoverText:
          '报名数（总）：活动报名成功的总人数（包含后台导入/代报名成功的、已经取消报名的；不包含报名申请中、报名被驳回的、管理员导入未分配报名类型的报名人员）；',
      },
      {
        title: '取消报名数 ( 总 )',
        number: res.refundTicketNum,
        dayNumber: res.todayRefundTicketNum,
        openPopover: true,
        popoverText:
          '取消报名数（总）：报名成功后，再取消报名的总数（包含管理员导入分配了报名类型的报名取消报名；不包含报名被驳回的）；',
      },
      {
        title: '取消率 ( 总 )',
        number: accMul(res.refundRate || 0, 100),
        dayNumber:
          res.todayRefundRate === undefined ? undefined : accMul(res.todayRefundRate || 0, 100),
        unit: '%',
      },
      {
        title: '报名费收入 ( 总 )',
        number: res.totalTicketPrice,
        dayNumber: res.todayTotalTicketPrice,
        beforeUnit: '￥',
        openPopover: true,
        popoverText:
          '报名费收入（总）：活动报名成功收到的总费用（普通类型/管理员导入的报名金额记为0，包含已经取消报名的金额;不包含报名被驳回的）；',
      },
      {
        title: '退款金额 ( 总 )',
        number: res.totalRefundPrice,
        dayNumber: res.todayTotalRefundPrice,
        beforeUnit: '￥',
      },
      {
        title: '费用净收入 ( 总 )',
        number: res.ticketPrice,
        dayNumber: res.todayTicketPrice,
        beforeUnit: '￥',
        openPopover: true,
        popoverText: '费用净收入（总）：报名费收入（总）- 退款金额（总）= 费用净收入（总）；',
      },
    ]);
  };
</script>
